<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-27 16:37:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-23 10:45:01
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="自定义选项" class="tr">
      <el-switch v-model="value.__config.dataCustomLoad"></el-switch>
    </el-form-item>
    <el-form-item
      label="自定义函数"
      v-if="value.__config.dataCustomLoad"
      class="item-block"
    >
      <div class="list-item" @click="handleEdit">
        <div class="list-data">export default function { ... }</div>
        <div class="list-actions">
          <el-button type="text">
            <i class="el-icon-edit"></i>
          </el-button>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import CustomFnModal from "./customFnModal";
import basicmixins from "./basicmixins";

const CANSCADER_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} nodeId 当前节点id,根节点默认0
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} relationConfig 关联字段配置 { type: DICTIONARY/BUSINESS, value: 字典类型/模型编码 }
 * @returns 
 *  Array: [{ id, label }]
 *  Object: {data:[{ id, label }]}
 *  Promise
 */
export default function(nodeId,context, rootScope, relationConfig) {
  return []
}
`;
const TREE_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} nodeId 当前节点id,根节点默认0
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} relationConfig 关联字段配置 { modelCode: 模型编码 }
 * @param {*} searchKey 懒加载查询条件
 * @returns 
 *  Array: [{ id, label }]
 *  Object: {data:[{ id, label }]}
 *  Promise
 */
export default function(nodeId,context, rootScope, relationConfig,searchKey) {
  return []
}
`;
const LIST_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} relationConfig 关联字段配置 { type: DICTIONARY/BUSINESS, value: 字典类型/模型编码 }
 * @returns 
 *  Array: [{ id, label }]
 *  Object: {data:[{ id, label}]}
 *  Promise
 */
export default function(context, rootScope, relationConfig) {
  return []
}
`;
const SELECTTREE_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} relationConfig 关联字段配置 { type: DICTIONARY/BUSINESS, value: 字典类型/模型编码 }
 * @returns 
 *  Array: [{ id, label , children}]
 *  Object: {data:[{ id, label , children}]}
 *  Promise
 */
export default function(context, rootScope, relationConfig) {
  return []
}
`;
const MINDMAP_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} queryData 查询参数
 * @returns 
 *  Array: [{ id, label , children}]
 *  Object: {data:[{ id, label , children}]}
 *  Promise
 */
export default function(context, rootScope, queryData) {
  return []
}
`;
const TABLE_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} queryData 查询参数
 * @returns 
 *  Array: [{ key, value }]
 *  Object: { data: [{ key, value }], 
 *            empty: Boolean, 
 *            pageNo: Number, 
 *            pageSize: Number, 
 *            totalCount: Number, 
 *            totalPage: Number } 
 *  Promise
 */
export default function(context, rootScope, queryData) {
  return []
}
`;
const CALENDAR_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} queryData 查询参数
 * @returns 
 *  Array: [{ key, value }]
 *  Object: {data:[{ key, value }]}
 *  Promise
 */
export default function(context, rootScope, queryData) {
  return []
}
`;
const ECUSTOMCHART_OPTIONS_TEMPLATE = `/**
 * 自定义函数
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共事件对象
 * @param {*} queryData 查询参数
 * @returns 
 *  Array: []
 *  Promise
 */
export default function(context, rootScope, queryData) {
  return []
}
`;
const COMPONENT_TEMPLATE_MAP = {
  hlRadio: LIST_OPTIONS_TEMPLATE,
  hlCheckbox: LIST_OPTIONS_TEMPLATE,
  hlSelect: LIST_OPTIONS_TEMPLATE,
  hlSelectTree: SELECTTREE_OPTIONS_TEMPLATE,
  hlCascader: CANSCADER_OPTIONS_TEMPLATE,
  hlTableList: TABLE_OPTIONS_TEMPLATE,
  hlMindmap: MINDMAP_OPTIONS_TEMPLATE,
  hlTree: TREE_OPTIONS_TEMPLATE,
  hlCalendar: CALENDAR_OPTIONS_TEMPLATE,
  SearchSelect: LIST_OPTIONS_TEMPLATE,
  SearchTreeSelect: SELECTTREE_OPTIONS_TEMPLATE,
  SearchCascader: CANSCADER_OPTIONS_TEMPLATE,
  selectintree: MINDMAP_OPTIONS_TEMPLATE,
  selectinlist: TABLE_OPTIONS_TEMPLATE,
  eCustomChart:ECUSTOMCHART_OPTIONS_TEMPLATE,
};

export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    handleEdit() {
      const template = COMPONENT_TEMPLATE_MAP[this.value.tagName];
      CustomFnModal.init({
        title: "自定义函数",
        content: this.value.__config.dataCustomLoadFn || template,
        onConfirm: (data) => {
          this.$set(this.value.__config, "dataCustomLoadFn", data);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f9ff;
  padding: 5px 10px;
  border-radius: 3px;
  line-height: 1.5;

  cursor: pointer;

  &:nth-child(n + 2) {
    margin-top: 8px;
  }
}

.list-data {
  width: 70%;
  word-break: break-all;
}

.item-block {
  ::v-deep .el-form-item__label {
    float: none;
  }
}
</style>
